import React, {Component} from 'react';
import {Form, Input, Modal, Button} from 'antd';
import '../admin/style.less';

const { TextArea } = Input;
const FormItem = Form.Item;

@Form.create()
export default class NewsDetail extends Component {
	state = {
		visible: false,
		currentData: {},
	}

	componentWillMount() {
		if (this.props.visible) {
			this.setDate(this.props.visible, this.props.currentData);
		}
	}

	componentWillReceiveProps(nextProps) {
		if (this.state.visible !== nextProps.visible) {
			this.setDate(nextProps.visible, nextProps.currentData);
		}
	}

	setDate = (visible, currentData) => {
		this.setState({
			visible,
			currentData: currentData || {},
		});
	}

	handleCancel = () => {
		this.props.handleCancel();
		this.props.form.resetFields();
	}

	render() {
		const {visible, currentData} = this.state;
		const {getFieldDecorator} = this.props.form;
		const formLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 18},
            },
            style: {
                marginBottom: '8px',
            },
        };
		return (
			<div>
				<Modal
					title="新闻详情"
					visible={visible}
                    onCancel={this.handleCancel}
                    footer={null}
                    className="detail"
				>
					<Form>
						<FormItem label="标题" {...formLayout}>
							{getFieldDecorator('title', {
								rules: [{required: true, message: 'must'}],
								initialValue: currentData.title,
							})(
								<Input readOnly={true}/>
							)}
						</FormItem>
                        <FormItem label="作者" {...formLayout}>
                            {getFieldDecorator('author', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.author,
                            })(
                                <Input readOnly={true}/>
                            )}
                        </FormItem>
                        <FormItem label="发布时间" {...formLayout}>
                            {getFieldDecorator('publishDate', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.publishDate,
                            })(
                                <Input readOnly={true}/>
                            )}
                        </FormItem>
                        <FormItem label="内容" {...formLayout}>
                            {getFieldDecorator('content', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.content,
                            })(
                                <TextArea rows={4} readOnly={true}/>
                            )}
                        </FormItem>
					</Form>
				</Modal>
			</div>
		);
	}
}
